<template>
  <el-row style="padding-left: 2.5vw;padding-top: 6vw;background-color:	#F5F5F5;">
    <el-col :span="6">
      <div>
        <el-menu
            style="width: 25vw;min-height: calc(100vh)"
            class="el-menu-vertical-demo"
            active-text-color="black"
        >
          <el-menu-item  v-for="(item,i) in tableData" :key="item.id" @click="this.MenuEvent(i)"  >
                <span v-if="i==this.tableData.length-1&&this.formMsg.role==1" :style="{color :(i==this.$route.query.blockId?'blue':'black')}"
                      style="font-size: 2vw">添加新栏目</span>
                <span v-else  :style="{color :(i==this.$route.query.blockId?'blue':'black')}" style="font-size: 2vw"
                >{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <el-dialog title="提示" v-model="dialogVisible" width="40%">
        <el-form :model="formBlock" label-width="10vw">
          <el-form-item label="题目">
            <el-input v-model="formBlock.name" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveBlock">确 定</el-button>
        </span>
        </template>
      </el-dialog>
    </el-col>
    <el-col :span="18">
      <div v-for="(item) in blockData" >
      <el-card style="width: 85%;transform:translateX(50px);margin-right: 3vw;height: 20vw;
      margin-bottom: 2vw;">
          <div style="float: left;padding-right: 0.5vw">
            <img :src="item.url"
                 style="width:16vw;height: 16vw">
          </div>
          <div >
            <router-link :to="'/WebPage4_1?pageIndex='+this.$route.query.pageId+'&blockId='+this.$route.query.blockId+
            '&page='+this.currentPage+'&index='+item.id" style="text-decoration:none;">
            <span style="font-weight:1000;color:#3C5266 ;font-size: 2.5vw;padding-left: 2vw;text-decoration:none;" @click="">{{item.title}}</span>
            </router-link>
            <span style="font-size: 1.5vw;color:white;float:right;right:10vw;padding-left: 7vw ;background-color:	#4E798C; height:3vw; line-height: 3vw;padding-right: 1.5vw">{{item.date}}</span>
            <el-icon size="2vw" style=";color:white;float:right;left: 4vw ;top:0.5vw;background-color:	#4E798C;" >
              <Calendar/>
            </el-icon>
            <p/>
            <span class="content" style="position:relative;font-size: 1.3vw;line-height: 2.1vw;width:100%;padding-left: 1.5vw;top:1vw">{{sliceStr((ToText)(item.content),110)}}</span>
          </div>
      </el-card>
    </div>
      <el-footer>
        <el-row>
          <el-col :span="1"/>
          <el-col :span="17">
            <el-pagination
                v-model:currentPage="currentPage"
                :page-sizes="3"
                :page-size="pageSize"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total,  prev, pager, next, jumper"
                :total="total"
                @current-change="handleCurrentChange"
            />
          </el-col>
          <el-col :span="6">
            <el-button @click="add()" v-if="this.formMsg.role==1||this.formMsg.role==2" >新增内容</el-button>
            <el-popconfirm v-if="this.formMsg.role==1" title="确定删除吗" @confirm="handDelete(this.$route.query.blockId)" >
              <template #reference><el-button size="small" >删除栏目</el-button></template>
            </el-popconfirm>
          </el-col>
        </el-row>
      </el-footer>
    </el-col>
</el-row>
</template>
<script>

import Page4Aside from "@/components/Page/Page1/Page4Aside";
import request from "@/utils/request";
import {computed} from "vue";
import {Calendar,PLus} from '@element-plus/icons-vue';
import E from 'wangeditor'

export default {
  name: "WebPage4",
  components:{
    Page4Aside,
    Calendar,
    PLus,
  },

  setup(props,context){
    const sliceStr= computed(()=>{
      return function (val,len){
        return val.length>len?val.slice(0,len)+"...":val
      }
    })
    return {sliceStr}
  },
  data(){
    return{
      historyIndex:0,
      formBlock:{},
      form:{},
      dialogVisible:false,
      currentPage:1,
      formMsg:{},
      pageSize:3,
      tableData:[],
      blockData:[],
      total:0,
    }

  },
  created() {
    let str=sessionStorage.getItem("user")||"{}"
    this.formMsg=JSON.parse(str);
    request.get("/user/"+this.formMsg.id).then(res=>{
      if(res.code==='0'){
        this.formMsg=res.data;
      }
    })
    this.historyIndex=this.$route.query.blockId;
    this.currentPage=this.$route.query.page;
    this.load();
  },
  methods: {
    ToText(HTML) {
      var input = HTML;
      return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ');
    },
    load() {
      request.get("/page4block", {
        params: {
          search: this.$route.query.pageId,
        }
      }).then(res => {
        console.log(res);
        this.tableData = res;
        if(this.formMsg.role==1)
          this.tableData.push({});
      })
      request.get("/webpage4", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.$route.query.blockId,
          searchPageId: this.$route.query.pageId,
        }
      }).then(res => {
        this.blockData = res.data.records;
        this.total = res.data.total;
        console.log(res);
      })
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },
    add(){
      this.form={};
      this.form.title="无";
      this.form.author="无";
      if(this.formMsg.role==2){
        this.form.author=this.formMsg.nickName;
      }
      this.form.date=new Date();
      this.form.pageId=this.$route.query.pageId;
      this.form.content="无";
      this.form.blockId=this.$route.query.blockId;
      request.post("/webpage4",this.form).then(res=>{
        console.log(res);
        this.load();
      })
    },
    getStyle(i) {
      if (i == this.$route.query.blockId) {
        return {
          fontsize: this.size + 'px',
          color: this.color,
        }
      } else {
        return {
          fontsize: this.size + 'px',
          color: 'white',
        }
      }
    },
    saveBlock() {
      {
        request.post("/page4block", this.formBlock).then(res => {
          console.log(res);
          this.$message({
            type: "success",
            message: "新增成功"
          })
        })
      }
      this.dialogVisible = false;
      this.$router.push({path: '/WebPage4', query: {pageId: this.$route.query.pageId, blockId: this.historyIndex, page: 1}})
    },
    MenuEvent(i) {
      if (i == this.tableData.length - 1&&this.formMsg.role==1) {
        this.formBlock = {};
        this.formBlock.pageId = this.$route.query.pageId;
        this.dialogVisible = true;
      } else {
        this.$router.push({path: '/WebPage4', query: {pageId: this.$route.query.pageId, blockId: i, page: 1}})
      }
    },
    handDelete(id){
      console.log(id);
      request.delete("/page4block/"+this.tableData[id].id).then(res=>{
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      request.delete("/webpage4/deletebyblockId/"+ id).then(res=>{
        if(res.code!='0'){
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      this.$router.push({path: '/WebPage4', query: {pageId: this.$route.query.pageId, blockId: 1, page: 1}})
    }

  }
}
</script>


<style scoped>

</style>